<template>
  <div>
    <headers />
    <div class="warp">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in image" :key="index">
          <img :src="item.picUrl" alt />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5" icon-size="68px" :clickable="true">
        <van-grid-item v-for="fenlei in fenlei" :key="fenlei.id" :icon="fenlei.icon" :to="'/itemsList/' + fenlei.id"/>
      </van-grid>
      <div class="imgae">
        <div class="imgae-left">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d692a30ee3d586c4274575eec255d3c5.jpg?f=webp&w=537&h=762&bg=C1DDE9"
            alt
          />
        </div>
        <div class="imgae-right-top">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e32e68b1a554cd84af032d8ee03bf6d.jpeg?f=webp&w=537&h=378&bg=C1DDE9"
            alt
          />
        </div>
        <div class="imgae-right-bottom">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e2dd638ceb36697af693973ff85a7a9b.jpg?f=webp&w=537&h=378&bg=E0FCFF"
            alt
          />
        </div>
        <div class="imgae-bottom">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49c66e13f8370c1c09302b5a835e95e4.jpg?f=webp&w=1080&h=420&bg=73B9EA"
            alt
          />
        </div>
        <div class="imgae-bottom-2">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/10d5e0e2a319079549175a8831417edc.jpg?f=webp&w=1080&h=660&bg=FFFFFF"
            alt
          />
        </div>
      </div>
      <item :contentItem="contentItem" @intDetail="detailById" @addCart="addCart" />
       <!-- <loading /> -->
       <!-- <button @click="$showLoading()">显示loading</button> -->
    </div>
    <mytabbar />
  </div>
</template>
<script>
import mytabbar from 'components/My-Tabbar'
import headers from './components/home-header'
import item from './components/home-item'
// import loading from '@/plugins/loading/loading.vue'
// import axios from 'axios'
import { Toast } from 'vant'
import { fetchFenlei, getBanners, fenleiById } from 'api'
import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      fenlei: [],
      image: [],
      contentId: 172859,
      contentItem: []
    }
  },
  created () {
    console.log(this.$mount().$el)

    this.fetchFenlei()
    this.getBanners()
    this.fenleiById()
  },
  mounted () {},
  methods: {
    isInCart (sku) {
      // 判断购物车里是否有要加入购物车的这个商品数据
      // 判断数组中是否包含某个元素 indexOf-->判断基本数据类型 这里是数组套json
      // --->所以要用find（） 和findIndex（）去判断
      const index = this.Cartitems.findIndex(item => item.id === sku.id)
      return index
    },
    addCart (item) {
      // 将子组件里面传来的方法和数据进行商品加入购物车
      // console.log(item)
      // 购买数量 和规格没有
      const sku = {
        ...item,
        num: 1,
        checked: true
      }
      // console.log(this.isInCart(sku))
      // 注意:添加之前拿到购物车的数据与加入购物车的商品比对 看是否有重复的 重复->添加数量或者提示  mapState拿数据
      if (this.isInCart(sku) === -1) {
        // 购物车中没有商品
        this.add_cart(sku)
        Toast('已加入购物车')
      } else {
        // 购物车中已经有了该商品 数量++
        this.add_cart_num(this.isInCart(sku))
        Toast('购物车中已存在')
      }
    },
    detailById ({ index, id }) {
      this.$router.push({
        path: '/Detail',
        query: {
          id
        }
      })
    },
    fetchFenlei () {
      fetchFenlei().then((res) => {
        this.fenlei = res.data.data
      })
      //   this.$http.get('https://api.it120.cc/yuxianfeng/shop/goods/category/all').then(res => { console.log(res) })
    },
    getBanners () {
      getBanners().then((res) => {
        this.image = res.data.data
      })
    },
    fenleiById () {
      fenleiById({ categoryId: this.contentId }).then((res) => {
        if (res.data.code === 0) {
          this.contentItem = res.data.data
        }
      })
    },
    ...mapMutations('cart', ['add_cart', 'add_cart_num'])
  },
  computed: {
    ...mapState({
      Cartitems: (state) => state.cart.cart.items // 可以不深克隆 因为不改变值只是拿到值最判断 深克隆用于拿取值并且生成新的值--->新的值进行处理
    })
  },
  components: {
    mytabbar,
    headers,
    item
    // loading
  }
}
</script>
<style lang="scss" scoped>
.warp {
  margin: 50px 0;
  .my-swipe {
    img {
      width: 100%;
    }
  }
}
/deep/ .van-grid-item__text {
  font-size: 8px;
}
/deep/ .van-grid-item__content {
  padding: 8px 0px;
}
img {
  width: 100%;
}
.imgae {
  min-height: 660px;
  margin-top: 4px;
  position: relative;
  // background-color: pink;
  .imgae-left {
    width: 180px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .imgae-right-top {
    width: 186px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .imgae-right-bottom {
    width: 186px;
    position: absolute;
    right: 0;
    top: 130px;
  }
  .imgae-bottom {
    height: 146px;
    position: absolute;
    top: 265px;
    left: 0;
  }
  .imgae-bottom-2 {
    height: 230px;
    position: absolute;
    top: 420px;
    left: 0;
  }
}
</style>
